<template>
	<view class="one">
		
		<view class="admin">
			<view class="dong" >
			即将直播
		</view>
		</view>
		
		<!-- 视频 -->
		<view class="shipin" v-for="(item,index) in live.slice(0,1)" :key="index" @tap="xiangqing(item.id)">
			<view class="imgs">
				<image :src="'https://ss.lanqb.com/'+item.banner" mode=""></image>
				<view class="login">
					第{{item.periods}}期
				</view>
				
			</view>
			<view class="wenzi">
				<view class="bt">
					{{item.title}}
				</view>
				<view class="user  fl">
					<image class="tx" :src="'https://ss.lanqb.com/'+item.profile.avatar" mode=""></image>
					<text>{{item.profile.nickname}}</text>
				</view>
				<view class="shijian">
					时间:  {{item.begin_at}}
				</view>
				<view class="shijian">
					{{item.statistic.purchases}}人感兴趣
				</view>
				<view class="anniu">
					立即报名
				</view>
			</view>
			
		</view>
		<view class="kapai"  v-for="(item,index) in live.slice(1,2)" :key="item.id"  @tap="xiangqing(item.id)">
			<list :item="item"  ></list>
		</view>
	<!-- 往期 -->
	<view class="biaozhi">
		<view class="dian" >
		往期直播
	</view>
	</view>
	<!-- list -->
	<view class="kapai" v-for="(item,index) in shuju" :key="item.id" @tap="xiangqing(item.id)">
		<list  :item="item"></list>
	</view>
	</view>
</template>

<script>
	import { apis } from "@/http/api.js"
	import list from "@/components/dachu/list.vue"
	export default {
		props:['shuju'],
		data() {
			return {
				
				live:[],
			}
		},
		created(){
	apis.dachuzhibo().then((res)=>{
		// this.shuju=res[1].data.course.data
		this.live=res[1].data.live

	})
		},
		methods: {
			xiangqing(ids){
				console.log(ids);
				uni.navigateTo({
					url:"/pages/dachu/dachuxiangqingye?ids="+ids
				})
			}
		},
		components:{
			list,
		}
	}
</script>

<style lang="scss" scoped>
	.one{
		
		.admin{
			position: relative;
				margin: 0rpx 0 30rpx;
				height: 50rpx;
		}
		.dong{
			font-weight: 700;
			position: absolute;
			top: 0rpx;
			animation: donghua .4s linear;
			padding-left: 20rpx;
		
		}
		.dong::before{
			content: ' ';
			position: absolute;
			top: 18rpx;
			left: 0rpx;
			display: inline-block;
			width: 10rpx;
			height: 10rpx;
			background-color: #edce8c;
		
		}
		.dong::after{
			position: absolute;
			display: inline-block;
			content: "";
			width: 59rpx;
			height: 36rpx;
			top: -18rpx;
			right: -50rpx;
			    background: url(https://assets-cdn.lanqb.com/imgv3/daniu/dn-new_m@2x.png) no-repeat 0 100%;
			    background-size: cover;
		}
		@keyframes donghua {
			0%{
				top: 40rpx;
			}
			50%{
				top: 20rpx;
			}
			99%{
				top: 0rpx;
			}
			100%{
				top: 0rpx;
			}
		}
		.biaozhi{
			margin: 60rpx  0 30rpx;
			.dian{
					padding-left: 20rpx;
					position: relative;
					font-weight: 700;
			}
			.dian::before{
				content: ' ';
				position: absolute;
				top: 18rpx;
				left: 0rpx;
				display: inline-block;
				width: 10rpx;
				height: 10rpx;
				background-color: #edce8c;
			}
		}
		
		.shipin{
			width: 100%;
			height: 634rpx;
			background-color: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			.imgs{
				width: 100%;
				height: 388rpx;
				position: relative;
			
				image{
					width: 100%;
					height: 100%;
				}
				.login{
					position: absolute;
					text-align: center;
					border-radius: 12rpx;
					font-weight: 400;
					padding: 0 10rpx;
					height: 36rpx;
					line-height: 36rpx;
					font-size: 24rpx;
					color: #fff;
					top: 10rpx;
					left: 10rpx;
					background-color: rgba(0,0,0,.4);
				}
				
			}
		.wenzi{
			position: relative;
			padding: 20rpx 20rpx 45rpx;
			.bt{
				font-size: 30rpx;
				font-weight: 700;
				margin-bottom: 10rpx;
			}
			.user{
				align-items: center;
				font-size: 26rpx;
				margin-bottom: 8rpx;
				.tx{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					overflow: hidden; 
				
					margin-right: 10rpx;
				}
				
			}
			.shijian{
				color: #9f9f9f;
				font-size: 12rpx;
			}
			.anniu{
				position: absolute;
				bottom: 50rpx;
				right: 20rpx;
				width: 172rpx;
				height: 64rpx;
				background-color: #edce8c;
				font-size: 24rpx;
				text-align: center;
				line-height: 64rpx;
				border-radius: 28rpx;
			}
		}
		}
	.kapai{
		width: 100%;
		padding: 10rpx 20rpx 0;
		background-color: #fff;
		box-sizing: border-box;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
	}
	}
	

</style>
